<template>
	<view class="page">
		<uv-navbar title="预约咨询" @leftClick="leftClick" :safeAreaInsetTop="false" :fixed="false" >
		</uv-navbar>
		<uv-form labelPosition="left" borderBottom :model="model1" :rules="rules" ref="form" labelWidth="80">
			<view class="box">
				一、基本信息
				<uv-form-item label="联系人" prop="contactName" required borderBottom> 
					<uv-input border="none" v-model="model1.contactName" placeholder="请填写联系人信息"> 
					</uv-input>
				</uv-form-item>
				<uv-form-item label="联系方式" prop="contactNumber" required borderBottom>
					<uv-input border="none" type="number" v-model="model1.contactNumber" placeholder="请填写联系人联系方式">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="单位" prop="company" borderBottom>
					<uv-input border="none" v-model="model1.company" placeholder="请填写联系人单位">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="学历"  prop="educationLevel"  borderBottom>
					<picker mode="selector" :range="educationLevelOptions"  range-key="label" @change="educationLevelConfirem">
						<uv-input border="none" readonly :value="educationLevelTxt" placeholder="请填写学历">
						</uv-input>
					</picker>
				</uv-form-item>
				<uv-form-item label="职称" prop="jobTitle" placeholder="请填写职称" borderBottom>
					<uv-input border="none" v-model="model1.jobTitle"  placeholder="请填写职称">
					</uv-input>
				</uv-form-item>
				
				<uv-form-item label="专业" prop="major"  borderBottom>
					<uv-input border="none" v-model="model1.major" placeholder="请填写专业" >
					</uv-input>
				</uv-form-item>
				<uv-form-item label="研究方向" prop="researchDirection"  borderBottom>
					<uv-input border="none" v-model="model1.researchDirection" placeholder="请填写研究方向" >
					</uv-input>
				</uv-form-item>
				<div class="red">
					小提示：专业和研究方向至少填写一项
				</div>
			</view>
			<view class="box">
				二、论文要求
				<uv-form-item label="期刊级别" prop="journalLevel"  borderBottom>
					<uv-radio-group v-model="model1.journalLevel"  active-color="#f08505">
						<uv-radio :customStyle="{margin: '8px'}" label="核心期刊" name="01" />
						<uv-radio :customStyle="{margin: '8px'}" label="普通期刊" name="02" />
					</uv-radio-group>
				</uv-form-item>
				<uv-form-item label="核心期刊" prop="journalLevelChildren"  v-if="model1.journalLevel === '01'" borderBottom>
					<uv-checkbox-group v-model="journalLevelChildren"  >
						<uv-checkbox :customStyle="{margin: '8px'}" label="北大核心" name="01" active-color="#f08505"/>
						<uv-checkbox :customStyle="{margin: '8px'}" label="CSSCI来源" name="02" active-color="#f08505" />
						<uv-checkbox :customStyle="{margin: '8px'}" label="CSSCI扩展" name="03" active-color="#f08505" />
						<uv-checkbox :customStyle="{margin: '8px'}" label="CSSCI集刊" name="04" active-color="#f08505" />
						<uv-checkbox :customStyle="{margin: '8px'}" label="CSCD" name="05" active-color="#f08505" />
						<uv-checkbox :customStyle="{margin: '8px'}" label="统计源期刊" name="06" active-color="#f08505" />
					</uv-checkbox-group>
				</uv-form-item>
				<uv-form-item label="普通期刊" prop="journalLevel"  v-if="model1.journalLevel === '02'" borderBottom>
					<uv-checkbox-group v-model="journalLevelChildren"  >
						<uv-checkbox :customStyle="{margin: '8px'}" label="知网收录" name="01" active-color="#f08505"/>
						<uv-checkbox :customStyle="{margin: '8px'}" label="维普收录" name="02" active-color="#f08505"/>
						<uv-checkbox :customStyle="{margin: '8px'}" label="万方收录" name="03" active-color="#f08505"/>
						<uv-checkbox :customStyle="{margin: '8px'}" label="龙源收录" name="04" active-color="#f08505"/>
					</uv-checkbox-group>
				</uv-form-item>
				<uv-form-item label="所在单位认可的期刊" prop="journalRecognized"  borderBottom label-width="100">
					<view>
						<uv-input v-model="jobTitle1"  placeholder="请填写所在单位认可的期刊" border="bottom" />
						<uv-input v-model="jobTitle2"  placeholder="请填写所在单位认可的期刊" border="bottom" />
						<uv-input v-model="jobTitle3"  placeholder="请填写所在单位认可的期刊" border="bottom" />
						<uv-input v-model="jobTitle4"  placeholder="请填写所在单位认可的期刊" border="bottom" />
					</view>
				</uv-form-item>
				<uv-form-item label-width="100" label="期刊发表时间要求" prop="publicationTimeRequired" @click="showTimeSelect"  borderBottom>
					<uv-input border="none" readonly v-model="model1.publicationTimeRequired" placeholder="请填写期刊发表时间要求">
					</uv-input>
				</uv-form-item>
			</view>
			<view class="box">  
				三、著作要求
				<uv-form-item label="是否需要著作" prop="isWritings" label-width="100"  borderBottom>
					<uv-radio-group v-model="model1.isWritings" active-color="#f08505">
						<uv-radio :customStyle="{margin: '8px'}" label="是" name="1" />
						<uv-radio :customStyle="{margin: '8px'}" label="否" name="0" />
					</uv-radio-group>
				</uv-form-item>
			<!-- 	<uv-form-item label="论文用途" prop="thesisUse" label-width="100"  borderBottom>
					<uv-textarea border="none" v-model="model1.thesisUse" type="textarea" placeholder="请填写论文用途">
					</uv-textarea>
				</uv-form-item> 
				<uv-form-item label="论文要求:(不超过100字)" prop="isWritings" label-width="100"  borderBottom>
					<uv-textarea border="none" v-model="model1.thesisRequire" type="textarea" maxlength="100" placeholder="请填写论文要求">
					</uv-textarea>
				</uv-form-item>
				<uv-form-item label="是否有论文" prop="isThesis" label-width="100"  borderBottom>
					<uv-radio-group v-model="model1.isThesis">
						<uv-radio :customStyle="{margin: '8px'}" label="是" name="1" />
						<uv-radio :customStyle="{margin: '8px'}" label="否" name="0" />
					</uv-radio-group>
				</uv-form-item>
				<uv-form-item label="刊物要求" prop="publicationRequire" label-width="100"  borderBottom>
					<uv-textarea border="none" v-model="model1.publicationRequire" type="textarea" placeholder="请填写刊物要求">
					</uv-textarea>
				</uv-form-item> -->
			</view>
		<!-- 	<div class="box">
				三、用户信息
				<uv-form-item label="用户昵称">
					<input v-model="userInfo.nickName"  type="nickname" />
				</uv-form-item>
				<uv-form-item label="用户头像">
					<button class="getheadbtn" v-if="!userInfo.avatarUrl" open-type="chooseAvatar" @chooseavatar="chooseavatar" >选择头像</button>
					<image v-if="userInfo.avatarUrl"  :src="userInfo.avatarUrl" mode="aspectFill" style="width: 100upx;height: 100upx;"></image>
				</uv-form-item>
			</div> -->
				<lookDoc v-model="lookDoc"></lookDoc>
			<view class="submit-box">
				<uv-button type="error" text="重置" class="ele" @click="reset" color="#c7c7c7"></uv-button>
				<uv-button type="success"  text="提交" class="ele" @click="submit" color="#f08505"></uv-button>
			</view> 
		</uv-form>
		<uv-calendar ref="calendar" @confirm="confirm"></uv-calendar>
		
		
	</view>
</template>
<script>
	import { zzwBooking } from '@/api'
	import { getUserInfo } from '@/utils/utils.js'
	import lookDoc from '@/components/lookDoc/lookDoc.vue'
	export default {
		components: {
			lookDoc
		},
		computed: {
			educationLevelTxt() {
				if(!this.model1.educationLevel) return ''
				return this.educationLevelOptions.find(ele => ele.value === this.model1.educationLevel).label
			}
		},
		data() {
			return {
				lookDoc: [],
				jobTitle1: '',
				jobTitle2: '',
				jobTitle3: '',
				jobTitle4: '',
				educationLevelOptions: [
					{ label: "小学", value: "01" },
					{ label: "中学", value: "02" },
					{ label: "高中", value: "03" },
					{ label: "大专", value: "04" },
					{ label: "本科", value: "05" },
					{ label: "研究生", value: "07" },
					{ label: "博士", value: "08" }
				],
				journalLevelChildren: [],
				userInfo: {
					"contactName": "", // 真实姓名
					"contactNumber": "", // 真实电话
					"wechatNumber": "", // 真实微信号
					"nickName": "", // 微信昵称
					"gender": "", //性别
					"city": "", // 地市
					"province": "", // 省份
					"country": "", // 国家
					"avatarUrl": "", // 头像
					"parentInviteCode": "" // 邀请码
				},
				urlHead: '',
				model1: {
					company: "", // 单位
					contactName: "", // 联系人姓名
					contactNumber: "", // 联系方式
					educationLevel: "", // 学历(01小学、02中学、03高中、04大专、05本科、06研究生 07 博士
					jobTitle: "", // 职称
					major: "", // 专业
					researchDirection: "", // 研究方向
					journalLevel: "01", // 期刊级别 (01核心期刊 (0101 北大核心、0102 CSSCI
					journalRecognized: "", // 所在单位认可的期刊
					publicationTimeRequired: "", // 期刊发表时间要求
					isWritings: "", // 是否需要著作(1是0否)
					thesisUse: "", // 论文用途
					thesisRequire: "", // 论文要求
					isThesis: "", // 是否有论文 (1有0无)
					publicationRequire: "" // 刊物要求
				},
				rules: {
					contactName: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					contactNumber: [
						{
							type: "string",
							required: true,
							message: "内容不能为空", 
							grigger: ['blur', 'change']
						},
					],
					educationLevel: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					jobTitle: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					major: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					researchDirection: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					journalLevel: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					journalRecognized: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					publicationTimeRequired: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					isWritings: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					thesisUse: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					thesisRequire: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					isThesis: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
					publicationRequire: {
						type: "string",
						required: true,
						message: "内容不能为空",
						grigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		watch: {
			'model1.journalLevel'(){
				this.journalLevelChildren = []
			}
		},
		mounted() {
			const inviteCode = uni.getStorageSync('inviteCode') || ''
			this.model1.parentInviteCode = inviteCode
			const userinfo = JSON.parse(uni.getStorageSync('userinfo'))
			if(!userinfo.nickName || userinfo.nickName === '微信用户') {
				uni.showModal({
					title: '请先完善用户名称',
					showCancel: false,
					success: ()=> {
						// uni.navigateTo({
						// 	url: '/pages/userinfo/userinfo'
						// })
						this.$emit('toUser')
					}
				})
				
			}
		},
		methods: {
			leftClick() {
				this.$emit('goHome')
			},
			educationLevelConfirem(data) {
				this.model1.educationLevel = this.educationLevelOptions[data.detail.value].value
			},
			chooseavatar(data) {
				this.userInfo.avatarUrl = data.detail.avatarUrl
			},
			confirm(date) {
				this.model1.publicationTimeRequired = date[0]
			},
			// 时间选择
			showTimeSelect() {
				this.$refs.calendar.open()
			},
			// 提交
			async submit() {
				if(!this.validate()) return
				// this.ifForm()
				// await this.$refs.form.validate()
				this.model1.journalRecognized = [this.jobTitle1,this.jobTitle2,this.jobTitle3,this.jobTitle4].filter(d => d).join(',')
				this.model1.journalLevel = this.journalLevelChildren.map(ele => {
					return this.model1.journalLevel + ele
				}).join(',')
				await zzwBooking({ "openid": uni.getStorageSync('openid'), ...this.model1 })
				
				uni.showModal({
					title: '提交成功',
					showCancel: false,
					success: ()=> {
						this.reset()
					}
				})
				
			},
			validate() {
				if(!this.lookDoc.length) {
					uni.showToast({
						icon:'none',
						title: '请阅读并同意用户协议和隐私指引'
					})
					return false
				}
				if(!this.model1.contactName) {
					uni.showToast({
						icon:'none',
						title: '联系人不能为空'
					})
					return false
				}
				if(!/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(this.model1.contactNumber)) {
					uni.showToast({
						icon:'none',
						title: '联系方式手机号格式不正确'
					})
					return false
				}
				if(!this.model1.contactNumber) {
					uni.showToast({
						icon:'none',
						title: '联系方式不能为空'
					})
					return false
				}
				if(!this.model1.researchDirection && !this.model1.major) {
					uni.showToast({
						icon:'none',
						title: '专业和研究方向至少填写一项'
					})
					return false
				}
				return true
			},
			// 重置
			reset() {
				// this.$refs.form.resetFields(); 
				this.jobTitle1 = ''
				this.jobTitle2 = ''
				this.jobTitle3 = ''
				this.jobTitle4 = ''
				this.journalLevelChildren = '01'
				this.$refs.form.clearValidate();
				this.model1= {
					contactName: "", // 联系人姓名
					contactNumber: "", // 联系方式
					company: "", // 单位
					educationLevel: "", // 学历(01小学、02中学、03高中、04大专、05本科、06研究生 07 博士
					jobTitle: "", // 职称
					major: "", // 专业
					researchDirection: "", // 研究方向
					journalLevel: "01", // 期刊级别 (01核心期刊 (0101 北大核心、0102 CSSCI
					journalRecognized: "", // 所在单位认可的期刊
					publicationTimeRequired: "", // 期刊发表时间要求
					isWritings: "", // 是否需要著作(1是0否)
					thesisUse: "", // 论文用途
					thesisRequire: "", // 论文要求
					isThesis: "", // 是否有论文 (1有0无)
					publicationRequire: "" // 刊物要求
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #eee;
		.content {
			padding: 10upx;
			height: 800upx;
			box-sizing: border-box;
			overflow: auto;
		}
		.link {
			color: #f08505;
		}
		.box {
			border: 1px solid #eaeaea;
			background-color: #fff;
			padding: 20upx;
			margin-bottom: 10upx;
			border-radius: 10upx;
			box-sizing: border-box;
		}
		.getheadbtn {
			width: 139rpx;
			height: 66rpx;
			font-size: 22rpx;
			line-height: 66rpx;
			margin-left: 20rpx;
		}
		.submit-box {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			padding: 10px ;
			background: #fff;
		}
		.red {
			font-size: 22upx;
			color: red;
		}
		.qkitem {
			border: 1px solid #eaeaea;
		}
	}
</style>